<template>
	<div class="wrapper" ref="wrapper">
		<slot></slot>
	</div>
</template>
<script>
	import BScroll from 'better-scroll'
	import {ref,onMounted} from 'vue'
	export default {
		name: 'Btscroll',
		props: {
			ynposition:{
				type:Number,
				default:2
			}
		},
		emits: ['scroll'],
		setup(props, context) {
			const wrapper = ref(null)
			var bscroll
			onMounted(() => {
				// 初始化Bscroll
				// BScroll中probeType是否时时侦测位置； 1 不侦测， 2 在手指滚动的过程中侦测， 3 手指离开屏幕后惯性滚动的位置也侦测
				bscroll = new BScroll(wrapper.value,{
					probeType: props.ynposition,
					//是否阻止原生事件
					click: true,
					//是否出现回弹动画
					//bounce:false,
					//回弹动画时长
					bounceTime: 300,
					// 阻止事件冒泡
					//stopPropagation: true
				})
				//监听滑动事件
				bscroll.on('scroll', (position) => {
					//发送scrool事件，并传递参数position
					context.emit('scroll', position,)
				})
				//监听滑动事件结束
				bscroll.on('scrollEnd', (position) => {
					//发送scrool事件，并传递参数position
					context.emit('scrollend', position,)
				})
			})
			
			//返回顶部
			function bscrollTo(x, y, time = 500) {
				bscroll.scrollTo(x, y, time)
			}
			function bscrollToElement(val) {
				bscroll.scrollToElement(wrapper.value.wrapper.getElementsByClassName('citycontent')[0].children[val],200)
			}
			//启用bscroll
			function benable() {
				bscroll.enable()
			}
			//禁用bscroll
			function bdisable() {
				bscroll.disable()
			}
			return {
				wrapper,
				bscrollTo,
				bscrollToElement,
				bscrollToElement1,
				benable,
				bdisable
			}
		}
	}
</script>
<style scoped>
</style>
